<!--
  @Descripttion:用户中心-投递记录
  @Author：yejianbo
  @Date：2022年05月26日 12:35:40
-->
<template>
  <div class="deliver-record-page">
    <pageCom>
      <div class="content-page">
        <!-- 头部导航栏 -->
        <div class="content">
          <div class="nav-com">
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              style="margin-bottom: 20px"
            >
              <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ name: 'userCenter' }"
                >用户中心</el-breadcrumb-item
              >
              <el-breadcrumb-item>
                <span style="color: #3d6cb0">{{
                  $route.meta.title || "--"
                }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="content-title">投递记录</div>
          <div class="search-condition">
            <el-row>
              <el-col :span="12">
                <span class="condition-icon"></span>
                <el-cascader
                  v-model="city"
                  style="width: 150px"
                  size="mini"
                  :options="provinceAndCityData"
                  :show-all-levels="false"
                  @change="handleCityChange"
                  :props="{ value: 'label' }"
                  placeholder="请选择城市"
                >
                </el-cascader>
                <el-button
                  size="mini"
                  type="text"
                  style="margin-left: 15px"
                  @click="reset"
                  >重置</el-button
                >
              </el-col>
              <el-col :span="12" style="text-align: right">
                <span class="tips-text">排序</span>
                <el-select
                  style="width: 269px"
                  v-model="rangType"
                  placeholder="请选择排序方式"
                  @change="rangTypeChange"
                >
                  <el-option label="投递时间由新到旧" value="desc"> </el-option>
                  <el-option label="投递时间由旧到新" value="asc"> </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <div class="list">
            <el-empty
              description="暂无相关投递"
              v-if="dataList.length <= 0"
            ></el-empty>
            <div
              class="item"
              :key="index"
              v-for="(item, index) in dataList"
              @click="openDetail(item)"
            >
              <div class="title">
                {{ item.jobName }}
                <span
                  >{{ item.lowestSalary + "-" + item.highestSalary }}元/天</span
                >
              </div>
              <div class="row">
                <span class="local-icon" />
                <span class="city">{{ item.city }}</span>
                <span class="small-text">{{ item.workPeriod }}</span>
                <span class="line" v-if="item.practicePeriod" />
                <span class="small-text" v-if="item.practicePeriod"
                  >{{ item.practicePeriod }}个月</span
                >
              </div>
              <div class="row2">
                {{ item.companyName }}
                <span class="line" v-if="item.industry"></span>
                {{ item.industry }}
              </div>
              <div class="date">
                投递日期：{{ item.postDate }}
                <span class="open">点击查看职位信息</span>
              </div>
            </div>
          </div>
          <el-pagination
            v-if="total > 0"
            class="bottom-page"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40, 50]"
            @size-change="pagesizeHandle"
            @current-change="currentChange"
            :current-page="pageNo"
          >
          </el-pagination>
        </div>
        <div class="mobile-deliver-record">
          <div class="deliver-record-condition">
            <van-row>
              <van-col span="12">
                <div class="city" @click="show = true">
                  <span>{{ city }}</span>
                  <img src="../../assets/images/user/downdrop.png" alt="" />
                </div>
              </van-col>
              <van-col span="12" class="condition-right">
                <van-dropdown-menu>
                  <van-dropdown-item v-model="rangType" :options="timeOption" />
                  <img
                    class="dropdown-icon"
                    src="../../assets/images/user/downdrop.png"
                    alt=""
                  />
                </van-dropdown-menu>
              </van-col>
            </van-row>
          </div>
          <div class="deliver-record-list">
            <div class="list">
              <van-empty
                v-if="dataList.length <= 0"
                class="custom-image"
                image="https://img.yzcdn.cn/vant/custom-empty-image.png"
                description="暂无数据"
              />
              <div class="item"
                :key="index"
                v-for="(item, index) in dataList"
                @click="openDetail(item)"
              >
                <div class="title">
                  <span class="title-name">{{ item.jobName }}</span>
                  <span class="salary"
                    >{{ item.lowestSalary + "-" + item.highestSalary }}元/天</span
                  >
                </div>
                <div class="row">
                  <span class="local-icon" />
                  <span class="city">{{ item.city }}</span>
                  <span class="small-text">{{ item.workPeriod }}</span>
                  <span class="line" v-if="item.practicePeriod" />
                  <span class="small-text" v-if="item.practicePeriod"
                    >{{ item.practicePeriod }}个月</span
                  >
                </div>
                <div class="row2">
                  {{ item.companyName }}
                  <span class="line" v-if="item.industry"></span>
                  {{ item.industry }}
                </div>
                <div class="date">
                  <span class="collection-time">投递日期：{{ item.postDate }}</span>
                  <span class="open">点击查看职位信息</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 移动端选择城市地区弹窗 -->
        <van-popup v-model="show" round position="bottom">
          <van-cascader
            v-model="value"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
      </div>
    </pageCom>
  </div>
</template>

<script>
import Vue from "vue";
import pageCom from "@/components/page/index.vue";
import { provinceAndCityData } from "@/utils/frontDataDict.js";
import { getRecord, isJob } from "../../request/api";
import { getWorkPeriodName } from "../../utils/frontDataDict";
import { formatTime } from "../../utils/utils";
import { Empty } from "vant";
Vue.use(Empty);
export default {
  // 组件名称
  name: "userCenter",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { pageCom },
  // 组件状态值
  data() {
    return {
      provinceAndCityData,
      dataList: [],
      city: "全国", // 城市
      rangType: "desc", // 排序方式
      pageNo: 1,
      pageSize: 10,
      total: 0,
      timeOption: [
        { text: "投递时间由新到旧", value: "desc" },
        { text: "投递时间由旧到新", value: "asc" }
      ],
      options: [],
      show: false,
      value: '' // 城市下拉框的空值
    };
  },
  created() {},
  mounted() {
    this.init();
    this.options = this.getCityData(provinceAndCityData);
  },
  watch: {
    rangType: function (newValue, oldValue) {
      this.init();
    },
  },
  // 组件方法
  methods: {
    getCityData(arr) {
      let newArr = arr.map((item) => {
        if (item.children) this.getCityData(item.children);
        item.text = item.label;
        return item;
      });
      return newArr;
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      let cityName = selectedOptions.map((option) => option.text);
      this.city = cityName[1];
      this.init();
    },
    currentChange(e) {
      this.pageNo = Number(e);
      this.init();
    },
    pagesizeHandle(val) {
      this.pageSize = Number(val);
      this.init();
    },
    openDetail(item) {
      isJob({ id: item.jobId }).then((res) => {
        if (res.code === 0 && res.data) {
          /**
           * 职位状态 0 发布 1 暂停发布 2 删除
           */
          if (Number(res.data) === 0) {
            this.linkTo(item.jobId);
          } else if (Number(res.data) === 1 || Number(res.data) === 2) {
            this.$message.warning("该职位已停止发布");
          }
        }
      });
    },
    init() {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        city: this.city !== "全国" ? this.city : ""
        // sendType: '2' // 最新字段， 0 学生自主投递 1 企业直接发送邀请 2 平台运营邀请（这里传0，过滤掉企业发起的邀请）
      };
      if (Array.isArray(this.city) && this.city.length === 2) {
        params.city = this.city[1];
      }
      params.sortField = {
        field: "postDate",
        order: this.rangType,
      };
      getRecord(params).then((res) => {
        if (res.data) {
          let list = res.data.list;
          list.forEach((v) => {
            // if (v.jobName.length > 5) {
            //   v.jobName = v.jobName.slice(0, 5) + "...";
            // }
            // if (v.companyName.length > 5) {
            //   v.companyName = v.companyName.slice(0, 5) + "...";
            // }
            try {
              v.city = JSON.parse(v.city)[1];
            } catch {
              () => {};
            }
            try {
              if (Array.isArray(JSON.parse(v.industry))) {
                v.industry = JSON.parse(v.industry)[1];
              }
            } catch {
              () => {};
            }
            v.workPeriod && (v.workPeriod = getWorkPeriodName(v.workPeriod));
            v.postDate && (v.postDate = formatTime(new Date(v.postDate)));
          });
          this.dataList = list;
          this.total = res.data.total;
        }
      });
    },

    linkTo(id) {
      localStorage.setItem("currentJobId", id);
      this.$router.push({
        path: `/jobDetail/${id}`,
      });
    },
    getList(e) {
      this.pageNo = e.page;
      this.init();
    },
    rangTypeChange(e) {
      console.log(e);
    },
    // 城市切换
    handleCityChange(data) {
      // this.city = data[1];
      this.init();
    },
    // 重置
    reset() {
      this.city = "";
      this.init();
    },
  },
};
</script>
<style lang="less">
@media (max-width: 768px) {
  .deliver-record-page {
    .content-page-com {
      padding-top: 0.45rem!important;
    }
  }
  .page-com .content-page-com .main-com {
    min-height: auto!important;
  }
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@media (min-width: 769px) {
  .mobile-deliver-record {
    display: none;
  }
  .content-page {
    position: relative;
    width: 100%;
    height: 100%;

    .bannber {
      position: relative;
      display: block;
      width: 100%;
      margin-bottom: 25px;
    }

    .content {
      position: relative;
      width: 100%;
      margin: 0 auto;

      .content-title {
        font-size: 28px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #37383d;
        line-height: 40px;
        margin-bottom: 15px;
        position: relative;
      }

      .search-condition {
        width: 100%;
        .tips-text {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 25px;
          margin-right: 12px;
        }

        .condition-icon {
          display: inline-block;
          width: 24px;
          height: 24px;
          background: url("../../assets/images/search-icon.png") no-repeat center
            center / cover;
          vertical-align: middle;
          margin-right: 13px;
        }
      }
    }

    .list {
      position: relative;
      width: 100%;
      overflow: hidden;

      .item {
        position: relative;
        width: calc((100% - 50px) / 3);
        float: left;
        margin: 20px 25px 0px 0;
        border-radius: 9px;
        background: url("../../assets/images/user/deliver-bg.png") no-repeat top
          center / cover;
        padding: 30px 18px 20px;
        border: 1px solid #d4d6da;
        cursor: pointer;
        overflow: hidden;
        &:nth-child(3n) {
          margin: 20px 0px 0px 0;
        }

        .title {
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #37383d;
          line-height: 28px;
          margin-bottom: 20px;
          position: relative;
          padding-right: 130px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          > span {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 20px;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }

        .row {
          line-height: 30px;
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          .local-icon {
            display: inline-block;
            width: 20px;
            height: 24px;
            background: url("../../assets/images/user/local.png") no-repeat center
              center / cover;
            margin-right: 12px;
          }

          .city {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383d;
            line-height: 20px;
            margin-right: 15px;
          }

          .small-text {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 30px;
          }

          .line {
            display: inline-block;
            width: 1px;
            height: 10px;
            background: #9597a0;
            margin: 0 10px;
          }
        }

        .row2 {
          width: 100%;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 20px;
          margin-bottom: 15px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          .line {
            display: inline-block;
            width: 1px;
            height: 10px;
            background: #9597a0;
            margin: 0 20px;
          }
        }

        .date {
          line-height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #c4c4c4;

          .open {
            float: right;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2f8efe;
            line-height: 20px;
          }
        }
        &:hover {
          box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
          .title {
            color: #2f8efe;
          }
        }
      }
    }
  }
  .bottom-page {
    margin-top: 20px;
    text-align: center;
  }
  /deep/ .el-breadcrumb__inner {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383d;
    line-height: 28px;
    cursor: pointer;
  }

  #app .el-pagination.is-background .el-pager li:not(.disabled).active {
    width: 32px !important;
    height: 32px !important;
  }
  /deep/ .el-button--text {
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3d6cb0;
    line-height: 21px;
  }
}
@media (max-width: 768px) {
  /deep/ .van-dropdown-menu__bar {
    height: 0.45rem;
    background: none;
    box-shadow: none;
  }
  /deep/ .van-dropdown-menu__title::after {
    content: none;
  }
  /deep/ .van-dropdown-menu__title--active {
    color: #2f8efe;
  }
  /deep/ .van-dropdown-item__option--active {
    color: #2f8efe;
  }
  /deep/ .van-dropdown-item__option--active .van-dropdown-item__icon {
    color: #2f8efe;
  }
  /deep/ .van-tabs__line {
    background-color: #4677b9;
  }
  /deep/ .van-cascader__option--selected {
    color: #4677b9;
  }
  /deep/ .van-dropdown-menu__title {
    width: 1.12rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /deep/ .van-dropdown-menu__title {
    width: 1.12rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .deliver-record-page {
    .content {
      display: none;
    }
  }
  .deliver-record-condition {
    width: 100%;
    height: 0.45rem;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    background-color: #ffffff;
    position: fixed;
    top: 0.54rem;
    left: 0;
    .city {
      display: flex;
      height: 0.45rem;
      justify-content: center;
      align-items: center;
      img {
        width: 0.12rem;
        height: 0.07rem;
        margin-left: 0.25rem;
      }
    }
    .condition-right {
      position: relative;
      .dropdown-icon {
        position: absolute;
        width: 0.12rem;
        height: 0.07rem;
        top: 0.19rem;
        right: 0.2rem;
      }
    }
  }
  .line {
    display: inline-block;
    width: 1px;
    height: 0.1rem;
    background: #9597a0;
    margin: 0 0.15rem;
  }

  .deliver-record-list {
    padding: 0.6rem 0 0.1rem;
    .item {
      margin-bottom: 0.1rem;
      border-left: 1px solid #d4d6da;
      border-right: 1px solid #d4d6da;
      border-top: 0.1rem solid #4677b9;
      border-bottom: 1px solid #d4d6da;
      border-radius: 0.05rem;
      padding: 0.12rem 0.12rem 0.16rem;
      font-size: 0.13rem;
      color: #9597a0;
      .title {
        display: flex;
        height: 0.28rem;
        align-items: center;
        font-size: 0.2rem;
        font-weight: 500;
        color: #37383d;
        .title-name {
          flex: 1;
        }
        .salary {
          font-size: 0.13rem;
          color: #9597a0;
          margin-right: 0.08rem;
        }
      }
      .row {
        display: flex;
        height: 0.18rem;
        align-items: center;
        margin: 0.1rem 0;
        .local-icon {
          width: 0.13rem;
          height: 0.16rem;
          background: url("../../assets/images/position.png") no-repeat center
            center / cover;
        }
        .city {
          font-size: 0.13rem;
          color: #37383d;
          margin: 0 0.16rem 0 0.07rem;
        }
      }
      .row2 {
        height: 0.18rem;
        line-height: 0.18rem;
        margin-bottom: 0.12rem;
      }
      .date {
        display: flex;
        height: 0.18rem;
        line-height: 0.18rem;
        .collection-time {
          flex: 1;
          font-size: 0.12rem;
          color: #c4c4c4;
        }
        .open {
          color: #2f8efe;
        }
      }
    }
  }
}
</style>
